<!--
 * @Author: g05047
 * @Date: 2021-06-11 16:03:45
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-07-23 17:55:08
 * @Description: file content
-->
<template>
  <page-layout title="劳资纠纷管理">
    <div class="labor-disputes">
      <a-form layout="inline">
        <a-form-model-item label="提交日期">
          <a-date-picker style="width:200px;" :value="searchForm.createTime ? moment(searchForm.createTime, 'YYYY-MM-DD') : ''" placeholder="请选择提交日期" @change="onDateChange" />
        </a-form-model-item>
        <a-form-item label="关键字">
          <a-input style="width:250px;" v-model="searchForm.keyword" placeholder="请输入姓名/手机号/身份证号" allow-clear />
        </a-form-item>
        <a-form-item label="企业/项目">
          <a-input style="width:200px;" v-model="searchForm.companyOrProject" placeholder="请输入企业/项目名称" allow-clear />
        </a-form-item>
        <a-form-item label="处理状态">
          <a-select style="width:200px;" v-model="searchForm.status" placeholder="请选择处理状态" allow-clear>
            <a-select-option :value="key" v-for="(value, key) in statusList" :key="key">{{ value }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="onSearchList">查询</a-button>
        </a-form-item>
      </a-form>
      <div style="text-align:right;margin:20px 18px 20px 0">
        <a-button type="primary" icon="plus" @click="onCreate">新建劳资纠纷</a-button>
      </div>
      <a-table rowKey="id" :columns="columns" :data-source="dataSource" :scroll="{x:true}" :pagination="{
                    current: searchForm.pageNum,
                    pageSize: searchForm.pageSize,
                    total: total,
                    showLessItems: true,
                    onChange: onPageChange,
                    onShowSizeChange: onSizeChange,
                }" style="background: #fff">
        <div slot="statusName" slot-scope="text">
          <a-badge :color="text == '已完结' ? 'green' : 'gold'" :text="text" />
        </div>
        <span slot="days" slot-scope="text" v-if="text">{{ text }}天</span>
        <span slot="createTime" slot-scope="text" v-if="text">{{ transferDate(text, 2) }}</span>
        <span slot="updateTime" slot-scope="text" v-if="text">{{ transferDate(text, 2) }}</span>
        <template slot="operation" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onDetail(record.id)">详情</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否要删除此行" @confirm="remove(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </a-table>
      <drawer title="劳资纠纷详情" ref="drawer" :visible.sync="detailDrawer" @getList="getList">
        <ldDetail slot="content" :id="id"></ldDetail>
      </drawer>
      <laborModal :laborModal="laborModal" @cancelModal="onCancelModal"></laborModal>
    </div>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
import moment from 'moment';
import ldDetail from './laborDisputesDetail.vue';
import laborModal from './modal/laborModal';
import { transferDate } from '@/utils/util';
import { getLaborList, getLaborCreate, getLaborDelete } from '@/services/labor.js';
import Drawer from '@/pages/components/drawer'
export default {
  name: 'authorityManagement',
  components: { ldDetail, laborModal, PageLayout, Drawer },
  data () {
    return {
      searchForm: {
        createTime: null,
        keyword: undefined,
        companyOrProject: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10,
      },
      detailDrawer: false,
      total: 0,
      dataSource: [],
      columns: [
        {
          title: '雇员姓名',
          width: 100,
          fixed: 'left',
          dataIndex: 'empName',
        },
        {
          title: '所属项目',
          dataIndex: 'projectName',
        },
        {
          title: '所属企业',
          dataIndex: 'companyName',
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
        },
        {
          title: '处理状态',
          dataIndex: 'statusName',
          scopedSlots: { customRender: 'statusName' },
        },
        {
          title: '已处理时长',
          dataIndex: 'days',
          scopedSlots: { customRender: 'days' },
        },
        {
          title: '产生时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          scopedSlots: { customRender: 'updateTime' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 110,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      id: undefined,
      typeList: [],
      statusList: {
        mediationing: '调解中',
        arbitrationing: '仲裁中',
        finish: '已完结',
      },
      laborModal: false,
    };
  },
  methods: {
    transferDate,
    moment,
    getList () {
      this.getLaborList(this.searchForm);
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.searchForm.pageNum = page;
      this.searchForm.pageSize = pageSize;
      this.getLaborList(this.searchForm);
    },
    onSizeChange (current, size) {
      this.searchForm.pageNum = 1;
      this.searchForm.pageSize = size;
      this.getLaborList(this.searchForm);
    },
    onDetail (id) {
      this.detailDrawer = true;
      this.id = id;
    },
    remove (id) {
      this.getLaborDelete({ id });
    },
    onDateChange (date, value) {
      this.searchForm.createTime = value;
    },
    onSearchList () {
      this.getLaborList(this.searchForm);
    },
    onCreate () {
      this.laborModal = true;
    },
    onCancelModal (result) {
      let { str, data } = result;
      if (str == 'ok') {
        data.id = this.id;
        this.getLaborCreate(data);
      }
      this.laborModal = false;
    },
    /**
     * @description: 劳资纠纷列表
     * @param {*}
     * @return {*}
     */
    getLaborList (params) {
      getLaborList(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.dataSource = data.content;
          this.total = data.totalElements;
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 创建劳资纠纷
     * @param {*}
     * @return {*}
     */
    getLaborCreate (params) {
      getLaborCreate(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success("创建成功！");
          this.getLaborList(this.searchForm);
        } else {
          this.$message.error(msg);
        }
      });
    },
    /**
     * @description: 删除劳资纠纷
     * @param {*}
     * @return {*}
     */
    getLaborDelete (params) {
      getLaborDelete(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$message.success("删除成功！");
          this.getLaborList(this.searchForm);
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
  mounted () {
    this.getLaborList(this.searchForm);
  },
};
</script>

<style scoped lang="less">
.labor-disputes {
  background: #fff;
  padding: 24px;
  .head {
    margin-bottom: 20px;
  }
}
</style>
